<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入样式 -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../app/lib/ZohoCrmHelper.js" type="text/javascript"></script>
    <script src="../app/lib/ZSDK.js" type="text/javascript"></script>
    <script src="../app/lib/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../app/lib/ZohoEmbededAppSDK.min.js" type="text/javascript"></script>
    <script src="../app/lib/axios.min.js" type="text/javascript"></script>
    <title>测试页面</title>
</head>

<body>
<div id="app">
    <!-- 使用 el-upload 组件 -->
    <el-upload
            ref="uploadRef"
            action="#"
            :auto-upload="false"
            :multiple="true"
            :on-change="handleFileChange"
            :before-upload="beforeUpload"
            list-type="text">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="saveToCRM">保存到CRM</el-button>
    </el-upload>
</div>
</body>

</html>

<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data() {
            return {
                crmId: "",
                selectedFiles: [],
                data: [],
            };
        },
        mounted() {
            this.initData();
            ZOHO.embeddedApp.init();
        },
        methods: {
            initData() {
                ZOHO.embeddedApp.on("PageLoad", (data) => {
                    this.crmId = data.EntityId;
                });
            },
            handleFileChange(file, fileList) {
                this.selectedFiles = fileList;
            },
            beforeUpload() {
                return false;
            },
            saveToCRM() {
                if (this.selectedFiles.length > 0) {
                    this.selectedFiles.forEach((file) => {
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            const arrayBuffer = e.target.result;
                            const blob = new Blob([arrayBuffer], { type: file.raw.type });
                            console.log('转换后的Blob对象:', blob);

                            const fileName = file.name;
                            const newFile = new File([blob], fileName, {
                                type: blob.type
                            });

                            ZOHO.CRM.API.attachFile({
                                Entity: "Accounts",
                                RecordID: "203201000001561259",
                                File: { Name: fileName, Content: newFile }
                            }).then((data) => {
                                console.log(JSON.stringify(data));
                            }).catch((error) => {
                                console.error('文件上传出错:', error);
                            });
                        };
                        reader.readAsArrayBuffer(file.raw);
                    });
                } else {
                    console.log('请选择至少一个文件');
                }
            },
        }
    });
</script>
<style>

</style>
